<template>
  <view id="userinfo">
    <view class="body">
      <view class="son">
        <view class="sonleft">昵称</view>
        <view class="sonright">
          <input type="text" v-model="formname" placeholder="请输入姓名" />
        </view>
      </view>
      <view class="son">
        <view class="sonleft">手机号码</view>
        <view class="sonright">
          <input type="text" v-model="formphone" placeholder="请输入手机号" />
        </view>
      </view>
      <view class="son">
        <view class="sonleft">性别</view>
        <view class="sonright">
          <view
            class="man"
            :class="{ manactive: selectman === i }"
            v-for="(item, i) in manlist"
            :key="i"
            @click="showman(i)"
            >{{ item.name }}</view
          >
        </view>
      </view>
      <view class="son">
        <view class="sonleft">生日</view>
        <view class="sonright" @click="show = true">
          {{ timevalue }}
          <u-datetime-picker
            :show="show"
            v-model="value1"
            mode="date"
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
          ></u-datetime-picker>
          <image
            src="@/static/index/right.png"
            style="width: 50rpx"
            mode="widthFix"
          />
        </view>
      </view>
    </view>

    <view class="botbox">
      <u-button class="botbut" @click="submit()">保存</u-button>
    </view>
  </view>
</template>


<script setup>
import { ref, computed } from "vue";
import { useStore } from "vuex";

const store = useStore();
const name = computed(() => store.state.userInfo.name);
const phone = computed(() => store.state.userInfo.phone);

const formname = ref(name.value);
const formphone = ref(phone.value);
const manlist = ref([
  {
    name: "先生",
    check: true,
  },
  {
    name: "女士",
    check: false,
  },
]);
const selectman = ref(0);
const showman = (i) => {
  manlist.value.forEach((item, index) => {
    item.check = index === i;
  });
  selectman.value = manlist.value.findIndex((item) => item.check);
};

const show = ref(false);
const value1 = ref(Date.now());

const time = ref("");

const timevalue = computed(() => {
  if (time.value) {
    const date = new Date(time.value);
    return date.toLocaleString();
  }
  return "";
});
const confirm = (e) => {
  console.log(e.value, 11);
  show.value = false;
  time.value = e.value;
};
const cancel = (e) => {
  // console.log(e,22);
  show.value = false;
};
const change = (e) => {
  // console.log(e,333);
};
const close = (e) => {
  // console.log(e,444);
  show.value = false;
};

const submit = () => {
  //判断stateshow是否为true，判断多选框是否选中
  if (formname.value && formphone.value) {
    console.log("提交");
    store.commit("setUserInfo", {
      name: formname.value,
      phone: formphone.value,
    });
    uni.navigateBack({
      delta: 1,
    });
  } else {
    uni.showToast({
      title: "请填写完整信息",
      icon: "none",
    });
  }
};
</script>

<style lang="scss">
#userinfo {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-color: #f0f8fa;
  padding-top: 20rpx;
  .botbox {
    width: 100%;
    height: 120rpx;
    position: fixed;
    bottom: 0;
    .botbut {
      width: 88%;
      margin: auto;
      background-color: #adb838;
      color: #fff;
      border-radius: 50rpx;
    }
  }
  .body {
    width: 94%;
    margin: auto;
    background-color: #fff;
    .son {
      width: 100%;
      height: 100rpx;
      background-color: #fff;
      border-bottom: solid 3rpx #f1f1f1;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      box-sizing: border-box;
      .sonleft {
        width: 180rpx;
      }
      .sonright {
        flex: 1;
        display: flex;
        input {
          height: 100%;
          border: none;
          outline: none;
          font-size: 26rpx;
          color: #959698;
        }
        .man {
          display: inline-block;
          border: solid 2rpx #959698;
          padding: 10rpx 30rpx;
          margin-right: 20rpx;
          border-radius: 8rpx;
          color: #959698;
        }
        .manactive {
          display: inline-block;
          border: solid 2rpx #959698;
          padding: 10rpx 30rpx;
          margin-right: 20rpx;
          border-radius: 8rpx;
          color: #fff;
          background-color: #adb838;
        }
      }
    }
  }
}
</style>
